<template>
  <div style="position:relative">
    <!-- 自定义导航 -->
    <!-- <van-nav-bar :title="navName" left-text="返回" right-text="添加空间" left-arrow @click-left="cancel" @click-right="addSpaces" :fixed="true"/>
     -->
    <!-- 显示内容 -->
    <div >
      <!-- 空间列表 -->
      <div style="margin-top:1px">
        <van-cell :title="'*'+item.name" v-model="from.result.id" v-for="(item, index) in spacesVal" :key="index" is-link value="" @click="toggle1(item, index)" size="large" :title-class="item.status==1 ?'openColor':'closeColor'"/>
      </div>
       <!-- 自定义弹窗 -->
      <div style="position:fixed; top:40%;left:0.5%;width:100%;">
        <van-dialog v-model="popup" title="选择" show-cancel-button confirm-button-text="进入设备" cancel-button-text="进入编辑"   style="position:relative" @confirm="toEquipment" @cancel="toSpacesEdit">
          <van-icon name="cross" style="position:absolute; top:9px; right:10px" size="24px" @click="closeShow" color="#333"/>
          <div style="padding:25px;text-align:center">请选择需要操作的选项!</div>
        </van-dialog>
      </div>
       <!-- 底部按钮 -->
      <!-- <div class="paddi">
        <van-button color="#08395b" class="btn" to='/selectSpaces'>编辑</van-button>
      </div> -->
     <div style="height:82px"></div>
     <div class="paddi">
      <van-button color="#08395b" :block="true" class="btn" :to='{path: "/addspaces"}'>添加空间</van-button>
    </div>
    </div>
    <!-- 数据为空显示 -->
    <spaces-kong v-if="conentShow"></spaces-kong>
    <van-loading type="spinner" color="#09385B" v-if="loadingShow" style="position:absolute; top:40%; left:46%"/>
  </div>
</template>
<script>
import spacesKong from "@/views/components/spacesKong.vue"
export default {
  components:{
    spacesKong,
  },
  data(){
    return{
      popup: false, //选择弹窗开关
      navName: localStorage.getItem('navName'), //导航名称
      conentShow: false,  //页面为空显示  控制
      loadingShow: true, 
      from:{
        result: [],
      },
      //2、空间
      spacesVal: [
        // {id:1, name:'华荣大厦1'},
      ],
    }
  },
  methods:{
    cancel(){
      this.$router.push({path: '/floor'});//返回上一层
    },
   
    //获取空间点数据
    getspacesList(){
      let floorID = sessionStorage.getItem('floorID');
      this.$http.get(`/api/spaces/getSpacesList?floorId=${floorID}&limit=999&page=1`,{
        headers:{ 'Authorization':localStorage.getItem('token'),}
      }).then(res =>{
        if(res.data.errcode == 0){
          if(res.data.data.list.length==0){
            setInterval(res =>{
              this.conentShow = true;
            },1500);
            this.loadingShow = false;
          }else{
             this.loadingShow = false;
             this.conentShow = false;
            res.data.data.list.forEach(el => {
            this.spacesVal = res.data.data.list;
          });
          }
        }
      })
    },
     //关闭 选择弹窗
    closeShow(){
      this.popup = false;
    },
    toggle1(val){
      sessionStorage.setItem("spacesID", val.id); //点击选中的 空间ID  存储
      sessionStorage.setItem("spacesVal", JSON.stringify(val));//选中的空间信息 存储
      this.popup = true;
    },
    toSpacesEdit(){
      this.$router.push({path: '/editspaces'});
    },
    toEquipment(){
      this.$router.push({
        path: `/equipment`, //进入下级
      })
    },
    // toggle(val, index) {
    //   sessionStorage.setItem("spacesID", val.id); //空间ID
    //   this.$router.push({
    //       path: "/equipment",
    //   })
    // },
  },
  created(){
    this.getspacesList();
  },
}
</script>

<style scoped>
  /* 固定底部按钮 */
  .paddi{
    background: #fff;
    padding: 2% 0;
    position:fixed;
    left:0;
    bottom:0%;
    width: 100%;
    display: flex;
    align-content: center;
    flex-direction: column;
    justify-content: center;
    /* margin: 0 auto; */
  }
  .btn{
    font-size: 32px;
    width:94%; 
    margin:11px auto; 
    border-radius:8px;
  }
</style>